<template>
  <div class="Bignul">
    <Back />
    <h2 class="inerh2">{{ $route.params.name }}</h2>
    <div class="bantwo">
      <div class="swiper mySwiper2">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in hotlesson" :key="item.id">
            <img :src="url + item.imgUrl" alt="" />
            <p class="coll">{{ item.buyNum | setMath() }}人已购买</p>
            <p class="tab">{{ item.courseType }}</p>
            <p class="level">{{ item.courseLevel }}</p>
            <div class="bande">
              <div class="deta">
                <p>{{ item.courseName }}</p>
                <p>
                  <i class="el-icon-user"></i>{{ item.teacher.teacherName }}
                </p>
              </div>
              <h2>
                ￥<span>{{ item.sellPrice }}</span>
              </h2>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="innerul">
      <h2 class="nh2">课程信息</h2>
      <ul @click="change(item)" class="nul" v-for="item in list" :key="item.id">
        <li class="nli">
          <img @click="check(item.courseid)" class="nliimg" :src="url1 + item.url" alt="" />
          <b class="b1">{{ item.laber1 }}</b>
          <b class="b2">{{ item.laber2 }}</b>
          <p class="nlii">
            <i class="iconfont icon-zhibo ,aaaa"></i> {{ item.playcount }}
          </p>
          <p class="qkx"><i class="el-icon-thumb"></i>{{ item.count }}</p>
          <div class="boxnli">
            <img class="nliimg1" :src="url2 + item.audiourl" alt="" />
            <span class="font">{{ item.avator }}</span>
          </div>
        </li>
        <p class="pyh">{{ item.title }}</p>
      </ul>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import { Banner, Holebanner, AfterLes, LesList } from "@/api";
import { getvideo } from "@/api";
export default {
  created() {
    let name = this.$route.params.name;
    this.get(name);
  },
  mounted() {
    this.getBannertwo();
  },
  data() {
    return {
      list: [],
      name: "",
      hotlesson: [],
      url: "http://192.168.10.32/yonghao/img/",
      url1: "http://192.168.10.32/junjian/img/",
      url2: "http://192.168.10.32/junjian/",
    };
  },
  methods: {
    change(id) {
    },
    get(name) {
      getvideo({ kind: name }).then((res) => {
        this.list = res.data.data;
      });
    },
    check(courseid) {
      this.$router.push({
        // http://localhost:8080/#/lesdetail?courseId=1
        path: "/lesdetail?courseId=" + courseid,
      });
    },
    getBannertwo() {
      Holebanner().then((res) => {
        // console.log(res,"hot")
        this.hotlesson = res.data.data;
      });
      setTimeout(() => {
        var swiper2 = new Swiper(".mySwiper2", {
          loop: true,
          autoplay: {
            delay: 5000,
            disableOnInteraction: false,
          },
        });
      }, 1000);
    },
  },
};
</script>

<style scoped>
.innerul {
  padding: 1vh 3vw 0 3vw;
  margin: 0 1vw;
  block-size: border-box;
  font-size: 30px;
}
.nh2 {
  font-size: 32px;
  height: 6vh;
  line-height: 6vh;
  padding-left: 2vw;
  margin-bottom: 1vh;
}
.innerul .b1 {
  position: absolute;
  left: 3vw;
  top: 1vh;
  width: 16vw;
  border-radius: 20px;
  color: black;
  height: 3.2vh;
  text-align: center;
  font-weight: normal;
  line-height: 3.2vh;
  background: rgba(255, 255, 255, 0.3);
}
.innerul .b2 {
  position: absolute;
  left: 23vw;
  top: 1vh;
  width: 16vw;
  border-radius: 20px;
  color: black;
  height: 3.2vh;
  text-align: center;
  font-weight: normal;
  line-height: 3.2vh;
  background: rgba(255, 255, 255, 0.3);
}
.nlii {
  position: absolute;
  bottom: 0;
  left: 0;
  color: rgb(255, 230, 0);
  width: 20vw;
  text-align: center;
  height: 3vh;
  line-height: 3vh;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.3);
}

.icon-zhibo {
  display: inline-block;
  vertical-align: middle;
  font-size: 40px;
  color: rgb(255, 0, 0);
}
.Bignul {
  width: 100vw;
  height: 100vh;
  margin-bottom: 10vh;
  /* overflow-y: scroll; */
}
.inerh2 {
  height: 6vh;
  line-height: 6vh;
  font-size: 40px;
  letter-spacing: 10px;
  text-align: center;
}
.nul {
  box-sizing: border-box;
  border: 1px solid #ccc;
  height: 30vh;
  margin-bottom: 3vh;
}
.nli {
  position: relative;
  height: 25vh;
  width: 100vw;
  position: relative;
}

.nliimg {
  width: 92vw;
  height: 25vh;
  float: left;
}
.nliimg1 {
  width: 8vw;
  height: 4vh;
  margin-top: 8.5vh;
  border-radius: 50%;
  position: absolute;
  top: 17vh;
  left: 47vw;
}
.font {
  margin-top: 1.5vh;
  float: right;
  margin-right: 3vh;
}
.qkx {
  margin-top: 1.5vh;
  margin-right: 5vh;
  float: right;
}
.nlii .aaaa {
  width: 1vw;
  height: 1vh;
  margin-left: 1vh;
}
.pyh {
  margin-top: 1.5vh;
}
</style>

<style scoped  lang="scss">
.main section {
  width: 13vw;
  margin: 0 3vw;
  text-align: center;
  > p:nth-child(1) {
    background: rgb(247, 247, 250);
    border-radius: 60%;
    padding: 2.5vw 0;
    > i {
      font-size: 8vw;
      color: #ff7e00;
    }
  }
  > p:nth-child(2) {
    font-size: 3.8vw;
    margin-bottom: 2vw;
  }
}
.main {
  margin-top: -2vh;
  padding-top: 15vh;
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  border-radius: 3vw 3vw 0 0;
  background: #fff;
}
.all {
  position: relative;
}
.banbott {
  width: 100vw;
  height: 18vh;
  background: tomato;
  overflow: hidden;
  > .cyle {
    margin-top: 3vh;
    width: 28vw;
    height: 15vh;
    border-radius: 100%;
    background: #fff;
    opacity: 0.2;
  }
}
.banbott1 {
  width: 100vw;
  height: 18vh;
  background: rgb(55, 170, 81);
  overflow: hidden;
  > .cyle1 {
    margin-top: 3vh;
    width: 28vw;
    height: 15vh;
    border-radius: 100%;
    background: #fff;
    opacity: 0.2;
  }
}
.banbott2 {
  width: 100vw;
  height: 18vh;
  background: rgb(109, 138, 255);
  overflow: hidden;
  > .cyle2 {
    margin-top: 3vh;
    width: 28vw;
    height: 15vh;
    border-radius: 100%;
    background: #fff;
    opacity: 0.2;
  }
}
.ban {
  position: absolute;
  top: 5vh;
  padding: 3vw;
}
.hotlesson {
  margin-top: 3vw;
}
.bantwo {
  padding: 0 3vw;
  padding-bottom: 1vh;
}
.coll {
  width: 20vw;
  color: #fff;
  border-radius: 5vw;
  font-size: 3vw;
  padding: 1vw;
  background: #999;
  opacity: 0.8;
  text-align: center;
  position: absolute;
  bottom: 15vw;
  left: 5vw;
}
.tab {
  width: 20vw;
  color: #fff;
  border-radius: 5vw;
  font-size: 3.5vw;
  padding: 1vw;
  background: #999;
  opacity: 0.8;
  text-align: center;
  position: absolute;
  top: 2vw;
  left: 5vw;
}
.level {
  width: 20vw;
  color: #fff;
  border-radius: 5vw;
  font-size: 3.5vw;
  padding: 1vw;
  background: #999;
  opacity: 0.8;
  text-align: center;
  position: absolute;
  top: 2vw;
  left: 30vw;
}
.ban p {
  position: absolute;
  left: 20vw;
  bottom: -1vh;
  z-index: 2;
}
.ban p i {
  font-size: 7vw;
  position: absolute;
  left: 3vw;
  bottom: 1.3vh;
}
.ban p input {
  text-indent: 12vw;
  width: 60vw;
  height: 6vh;
  font-size: 3.5vw;
  border-radius: 5vw;
  border: none;
  outline: none;
  box-shadow: 1vw 1vw 2vw #999;
}
.kuaixun img {
  width: 100%;
}
.kuaixun {
  position: relative;
  > .zixun {
    position: absolute;
    top: 5.5vh;
    left: 20vw;
  }
}
.hothea {
  display: flex;
  justify-content: space-between;
  padding: 0 5vw;
  > h2 {
    font-size: 5vw;
  }
  > a {
    font-size: 3.5vw;
    background: rgb(236, 239, 254);
    padding: 1.5vw 2.5vw;
    border-radius: 3vw;
    color: #6d8aff;
  }
}
.bande {
  width: 94vw;
  background: linear-gradient(
    180deg,
    rgba(219, 218, 252, 1) 0%,
    rgba(219, 218, 252, 1) 0%,
    rgba(221, 220, 252, 1) 22%,
    rgba(223, 220, 251, 1) 54%,
    rgba(235, 233, 254, 1) 75%,
    rgba(244, 242, 255, 1) 100%,
    rgba(244, 242, 255, 1) 100%
  );
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1vh;
  > h2 {
    font-size: 3.5vw;
    color: #ff9d02;
    margin-top: 3vh;
    margin-right: 2vw;
    > span {
      font-size: 5vw;
    }
  }
}
.deta p:nth-child(1) {
  font-size: 3.3vw;
  font-weight: bold;
  margin-top: 1vh;
  margin-left: 4vw;
}
.deta p:nth-child(2) {
  margin-top: 1vw;
  margin-left: 4vw;
  color: #999;
  font-size: 3.5vw;
  > i {
    font-size: 4.5vw;
    color: #999;
    margin-right: 2vw;
  }
}
.ready {
  margin-top: 8vw;
  > .less {
    display: flex;
    justify-content: space-between;
    padding: 0 5vw;
    margin-top: 3vw;
    flex-wrap: wrap;
    > .reales {
      width: 42vw;
      margin-bottom: 2vw;
      > img {
        width: 100%;
      }
      > .detat a {
        color: #000;
        font-size: 3.5vw;
        font-weight: bold;
        margin-top: 2vw;
      }
      > .detat p {
        margin-top: 1vw;
        font-size: 3.5vw;
        color: #999;
      }
    }
  }
}
.allles {
  padding: 0 5vw;
  margin-top: 5vw;
  > .hea {
    > h2 {
      font-size: 5vw;
    }
  }
}
.navv {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-top: 3vh;
}
.el-dropdown-link {
  font-size: 3.5vw;
  color: #999;
}
.ellist {
  font-size: 3vw;
  padding: 1vw 1.5vw;
}

.infinite-list-wrapper {
  margin-bottom: 13vh;
  > p {
    font-size: 3vw;
    text-align: center;
    margin-top: 2vh;
  }
}
// .list{
//     height: 100%;
// }
.list-item {
  border-bottom: 0.1vw solid #999;
  display: flex;
  padding: 5vw 0;
  justify-content: space-between;
  > p {
    font-size: 4vw;
    color: #ff9d02;
    margin-top: 10vh;
  }
  > .lesson {
    display: flex;
    > img {
      width: 40vw;
    }
    > section {
      padding: 3vw 0 0 3vw;
      > a {
        color: #000;
        font-size: 3.5vw;
        font-weight: bold;
      }
      > p:nth-child(2) {
        font-size: 3.2vw;
        color: #999;
        margin: 1.5vh 0;
        > span {
          margin: 0 2vw;
        }
      }
      > p:nth-child(3) {
        font-size: 3.2vw;
        color: #999;
        > i {
          font-size: 5vw;
          margin-right: 2vw;
        }
      }
    }
  }
}

.swiper {
  width: 94vw;
  overflow: hidden;
}
.swiper-slide {
  // text-align: center;
  font-size: 18px;
  background: #fff;
  justify-content: center;
  align-items: center;
}
.swiper-slide img {
  display: block;
  width: 94vw;
  height: 20vh;
  object-fit: cover;
  border-radius: 10px;
  overflow: hidden;
}
.mySwiper2 .swiper-slide img {
  height: 25vh;
}
</style>
